<template>
  <div id="Carousel">
    <h1>Carousel 走马灯</h1>
    <template>
      <el-carousel indicator-position="outside" height="280px" type="card">
        <el-carousel-item v-for="item in carouselData" :key="item.id">
          <!-- <span class="demonstration">默认</span> -->
          <a href="http://www.baidu.com" target="_blank">
            <el-image :src="item.url" fit="contain"
              >>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image></a
          >
        </el-carousel-item>
      </el-carousel>
    </template>
    <h1>大图预览模式</h1>
    <h3>点击图片进入大图预览：</h3>
    <div class="demo-image__preview">
      <el-image
        style="width: 100px; height: 100px"
        :src="url"
        :preview-src-list="srcList"
      >
      </el-image>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      carouselData: [
        { url: require("@/assets/fu/fu1.jpg"), fit: "文字1", id: 1 },
        { url: require("@/assets/fu/fu2.jpg"), fit: "文字2", id: 2 },
        { url: require("@/assets/fu/fu3.jpg"), fit: "文字3", id: 3 },
        { url: require("@/assets/fu/fu4.jpg"), fit: "文字4", id: 4 },
        { url: require("@/assets/fu/fu5.jpg"), fit: "文字5", id: 5 }
      ],
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
